<template>
	<div class="tikuBg">
		<div class="limitBox" v-if="!limitStatus">
			<div class="formBox" v-if="!nolimit">
				<h3>面试题库登录</h3>
				<p>雪恒教育-白雪面试内部专用</p>
				<div class="btn"><u-button type="error" text="点击登录" @click="toLogin()"></u-button></div>
			</div>
			<div class="formBox" v-else>
				<h3>您暂无权限，请联系教务老师给您添加权限</h3>
			</div>
		</div>
		
		<u-popup :show="showBj" mode="center" :safeAreaInsetBottom="false">
			<div class="popContent">
				<ul class="squre_bj">
					<li v-for="(bj,index) in userinfo" :key="index" @click="changeBj(bj.banji)">
						<h3>{{ bj.banji }}</h3>
					</li>
				</ul>
			</div>
		</u-popup>
		
		<u-popup :show="showMoshi" mode="center" :safeAreaInsetBottom="false">
			<div class="popContent" v-if="banjiDetail">
				<ul class="squre_moshi">
					<li v-for="(item,index) in moshiList" :key="index" @click="changeMoshi(item,index)">
						<h3>{{ item.name }}({{ banjiDetail[item.spell].length }})</h3>
						<p>{{ item.intro }}</p>
					</li>
				</ul>
			</div>
		</u-popup>
		
		<u-popup :show="welcome" mode="center" :safeAreaInsetBottom="false">
			<div class="popText">
				<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="推送中..." textSize="20"></u-loading-icon>
			</div>
		</u-popup>
		
		
		
		
		<u-sticky bgColor="#fff">
			<div class="banner">
				<image src="https://www.baixuemianshi.com/zhuanti/images/swiper_xcx2.jpg" mode="widthFix"></image>
			</div>
			<u-tabs :list="lxList"  :current="yjCurrent" @change="changeTabs"></u-tabs>
			<div v-if="ejlxList.length > 0" class="subFilter">
				<u-tabs :list="ejlxList" :current="ejCurrent" @change="changeEjTabs" lineColor="#f56c6c"></u-tabs>
			</div>
			
			<div class="searchBox">
				<u-search placeholder="输入关键字搜索" shape="round" v-model="searchVal"></u-search>
			</div>
			
			<div class="userInfo"> {{ userinfo[0].teacher }}老师，您好！当前选择班级：{{ selectBj }}</div>
		</u-sticky>
		
		<div class="container">
			
			<div class="loadBox" v-if="searchLoading">
				<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
			</div>
			<div class="items" v-else>
				<div class="item" v-for="(item,index) in searchList" :key="index">
					<h3 v-html="addGl(item.title)"></h3>
					<ul class="tags">
						<li v-for="(tag,j) in item.keyword.split(',')" :key="j">
							<u-tag :text="tag" plain size="mini" type="warning"></u-tag>
						</li>
					</ul>

					<div class="btns">
						<div class="btn" v-if="checkFav(item)">
							<u-button type="primary" size="mini" text="添加+" @click="addFav(item)"></u-button>
						</div>
						<div class="btn" v-else>
							<u-button type="primary" plain size="mini" text="取消+" @click="removeFav(item)"></u-button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="detailBtn" v-if="selectMoshi">
			<div>
				<u-button type="success"  size="small" text="更改班级" @click="showBj = true"></u-button>
			</div>
			<div>
				<u-button type="warning"  size="small" :text="selectMoshi.name" @click="showMoshi = true"></u-button>
			</div>
			<div>
				<u-button type="primary"  size="small" text="已选题目" @click="showDetail = true"></u-button>
			</div>
			<div>
				<u-button type="error"  size="small" text="分享题目" open-type="share"></u-button>
			</div>
		</div>

		<div class="detailBox" v-if="showDetail">
			<div class="content">
				<div class="close" @click="showDetail = false"><u-icon name="close-circle" size="28"
						color="#000"></u-icon></div>
				<h2>
					已选题目 
					<picker mode="selector" :range="moshiList" @change="changePicker" :range-key="'name'" :value="index">
						<view class="picker">
							<div class="s">{{ moshiList[selectMoshiIndex].name }}</div> <u-icon name="arrow-down" color="#606266" size="12"></u-icon>
						</view>
					</picker>
				</h2>
				<div class="item" v-for="(item,index) in favList" :key="index">
					<h3>{{index + 1}}、 [{{ item.leixing }}] {{ item.title }}</h3>
					<div class="d_btns">
						<div class="btn" v-if="selectMoshi.spell != 'zixi'">
							<div v-if="!checkAnswer(item)">
								<u-button type="success" size="mini" text="显示答案" @click="showanswer(item)"></u-button>
							</div>
							<div v-else>
								<u-button type="success" size="mini" plain text="隐藏答案" @click="showanswer(item)"></u-button>
							</div>
						</div>
						<div class="btn"><u-button type="error" size="mini" text="删除" @click="removeFav(item)"></u-button></div>
						<div class="btn"><u-button type="warning" size="mini" :text="item.time"></u-button></div>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				
				userinfo: {},
				showBj: false,
				selectBj: "",
				showMoshi: false,
				selectMoshi: {name: "模拟训练",spell: "moni",intro: "默认不显示答案"},
				selectMoshiIndex: 0,
				moshiList: [
					{name: "模拟训练",spell: "moni",intro: "默认不显示答案"},
					{name: "对练模式",spell: "duilian",intro: "默认显示答案"},
					{name: "自习模式",spell: "zixi",intro: "第二天00:00推送答案"},
					{name: "待考模式",spell: "daikao",intro: "默认显示答案"}
				],
				nolimit: false,
				welcome: false,
				leixings: [],
				lxList: [],
				lists: [],
				yjCurrent: 1,
				filterLxName: "全部类型",
				ejlxList: [],
				filterErlx: "",
				ejCurrent: 1,

				banjiDetail: {
					name: '',
					phone: '',
					banji: '',
					moni: [],
					duilian: [],
					zixi: [],
					daikao: []
				},
				searchLoading:true,

				addIdList: [],
				showDetail: false,
				time: "",
				
				limitStatus:false,
				searchVal: "",
				pages: 0
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					title: `题库-学员端`, //分享标题
					path: '/pages/nbhd/tiku/student', //分享页面路径
					imageUrl: '', //分享图标
					desc: '雪恒教育-白雪面试', //自定义分享描述 
				}
			} else {
				return {
					title: `题库-学员端`, //分享标题
					path: '/pages/nbhd/tiku/student', //分享页面路径
					imageUrl: '', //分享图标
					desc: '雪恒教育-白雪面试', //自定义分享描述 
				}
			}
		},
		onLoad(options) {
			
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			favList() {
				let that = this
				let fList = []
				let l = that.banjiDetail[that.selectMoshi.spell]
				return l
			},
			searchList(){
				let that = this
				
				let l = []
				if(that.searchVal){
					l = that.lists.filter(item => item.title.indexOf(that.searchVal) != -1)
				}else{
					l = that.lists
				}
				
				return l
			}
		},
		created() {
			let that = this;
			let date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			that.time = year + '/' + month + '/' + day
			that.getLeixing()
		},
		mounted() {
			let that = this 
			if(that.userphone){
				that.getuserStatus()
			}
			wx.hideLoading()
		},
		watch: {
			userphone(val){
				if (this.userphone) {
					this.getuserStatus()
				}
			}
		},
		methods: {
			...mapActions(['LogSetPhone']),
			toLogin(){
				uni.navigateTo({
					url: '../../my/login'
				})
			},
			async getuserStatus(){
				let that = this
				
				db.collection('nbhd_tiku_banjilist').where({
					phone: that.userphone
				}).get({
					success: function(res){
						if(res.data.length > 0){
							that.userinfo = res.data
							that.showBj = true
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							})
							
							that.limitStatus = true
						}else{
							uni.showToast({
								title: '暂无权限',
								icon: 'error'
							})
							that.nolimit = true
						}
					},
					fail: function(req){
						uni.showToast({
							title: '暂无权限',
							icon: 'error'
						})
					}
				})
			},
			getLeixing(){
				let that = this
				db.collection('nbhd_chanyan_leixing').get().then(res => {
					that.leixings = res.data
					that.filterLx()
				})
			},
			getList() {
				let that = this
				db.collection('nbhd_chanyan').where({
					leixing: that.filterLxName,
					leixing2: that.filterErlx
				}).skip(that.pages * 20).limit(20).get({
					success: res =>{
						if(res.data.length > 0){
							that.lists = that.lists.concat(res.data)
							that.pages += 1
							that.getList()
						}
						that.searchLoading = false
					}
				})
			},
			filterLx() {
				let that = this
				let lxs = that.leixings.map(item => item.leixing)
				// lxs.unshift('全部类型')
				let lxNames = []
				lxs.map(item => {
					lxNames.push({
						"name": item
					})
				})
				that.lxList = lxNames
				that.yjCurrent = 0
				that.filterLxName = lxs[0]
				that.filterEjLx()
			},
			filterEjLx() {
				let that = this
				let ejList = that.leixings[that.yjCurrent].leixing2
				let ejlxNames = []
				ejList.map(item => {
					ejlxNames.push({
						"name": item
					})
				})
				that.ejlxList = ejlxNames.length > 1 ? ejlxNames : []
				that.ejCurrent = 0
				if (ejlxNames.length > 1) {

					that.filterErlx = that.ejlxList[0].name
				} else {
					that.filterErlx = ''
				}
				that.getList()
				
				wx.hideLoading()
			},
			changeTabs(e) {
				this.searchVal = ''
				this.yjCurrent = e.index
				this.filterLxName = e.name
				this.searchLoading = true
				this.lists = []
				this.pages = 0
				this.filterEjLx()
			},
			changeEjTabs(e) {
				this.searchVal = ''
				this.ejCurrent = e.index
				this.filterErlx = e.name
				this.searchLoading = true
				this.lists = []
				this.pages = 0
				this.getList()
			},
			checkFav(item) {
				let that = this
				let idList = that.banjiDetail[that.selectMoshi.spell].map(l => l._id)
				let c = idList.includes(item._id)
				return !c
			},
			addFav(item) {
				let that = this
				if(that.selectMoshi.spell == "moni"){
					that.banjiDetail[that.selectMoshi.spell].push({_id: item._id,leixing: item.leixing,title: item.title,answer: false,time: that.time })
				}else if(that.selectMoshi.spell == "duilian"){
					that.banjiDetail[that.selectMoshi.spell].push({_id: item._id,leixing: item.leixing,title: item.title,answer: true,time: that.time })
				}else if(that.selectMoshi.spell == "zixi"){
					that.banjiDetail[that.selectMoshi.spell].push({_id: item._id,leixing: item.leixing,title: item.title,answer: false,time: that.time ,endtime: that.time + ' 23:59:59'})
				}else{
					that.banjiDetail[that.selectMoshi.spell].push({_id: item._id,leixing: item.leixing,title: item.title,answer: true,time: that.time })
				}
				
				that.saveUserInfo()
			},
			removeFav(obj) {
				let that = this
				let myArray = that.banjiDetail[that.selectMoshi.spell]
				myArray = myArray.filter(item => item._id != obj._id);
				that.banjiDetail[that.selectMoshi.spell] = myArray
				that.saveUserInfo()
			},
			pushContent() {
				let that = this
				that.welcome = true
				that.saveUserInfo()
			},
			getTimuInfo(){
				let that = this
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBj
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							that.showMoshi = true
						}else{
							that.pushEmpty()
						}
						
					}
				})
			},
			pushEmpty(){
				let that = this
				db.collection('nbhd_tiku_banji').add({
					data: {
						teacher: that.userinfo[0].teacher,
						phone: that.userinfo[0].phone,
						banji: that.selectBj,
						time: new Date(),
						moni: [],
						duilian: [],
						zixi: [],
						daikao: []
					},
					success: function(res) {
						that.getTimuInfo()
					}
				})
			},
			saveUserInfo(){
				let that = this
				db.collection('nbhd_tiku_banji').doc(that.banjiDetail._id).update({
					data: {
						time: new Date(),
						moni: that.banjiDetail.moni,
						duilian: that.banjiDetail.duilian,
						zixi: that.banjiDetail.zixi,
						daikao: that.banjiDetail.daikao
					},
					success: function(res) {
						
						that.welcome = false
					}
				})
			},
			addGl(title){
				let that = this
				if(!that.searchVal){
					return title
				}
				let sText = title
				let sKey = "<span class='searchBg'>" + that.searchVal + "</span>"
				let num = -1,
					rStr = new RegExp(that.searchVal, "g"),
					rHtml = new RegExp("\<.*?\>", "ig"), //匹配html元素
					aHtml = sText.match(rHtml); //存放html元素的数组
				sText = sText.replace(rHtml, '{~}'); //替换html标签
				sText = sText.replace(rStr, sKey); //替换key
				sText = sText.replace(/{~}/g, function() { num++;return aHtml[num];});
				return sText
			},
			checkAnswer(info){
				let that = this
				let t = that.banjiDetail[that.selectMoshi.spell].filter((item,index) => item._id == info._id)
				return t[0].answer
			},
			showanswer(info){
				let that = this
				let list = that.banjiDetail[that.selectMoshi.spell]
				list.map((item,index) => {
					if(item._id == info._id){
						list[index].answer = !list[index].answer
					}
				})
				that.banjiDetail[that.selectMoshi.spell] = list
				
			},
			changeBj(bj){
				this.selectBj = bj
				this.getTimuInfo()
				this.showBj = false
			},
			changeMoshi(moshi,index){
				this.selectMoshi = moshi
				this.selectMoshiIndex = index
				this.showMoshi = false
			},
			changePicker(e){
				this.selectMoshiIndex = e.detail.value
				this.selectMoshi = this.moshiList[e.detail.value]
			}
		},
		components: {

		}
	};
</script>

<style>
	@import url(./index.css);
</style>